<template>
    <div id="main">
        <h1><b>热卖中</b></h1>
        <!-- 即将热卖的 -->
        <el-row>
            <el-col v-for="url in productList" :key="url" :span="6">
                <!-- 卡片区域 -->
                <el-card :body-style="{ padding: '0px' }" shadow="always" class="productList">
                    <!-- 图片区域 -->
                    <div class="media-wrapper">
                        <!-- 图片懒加载 -->
                        <img 
                         v-lazy="url.shopImg"
                         class="image" 
                         alt="..." 
                         :key="url.shopImg"/>
                        <!-- 即将销售和售空 -->
                        <!-- <div :class="url.readypay === 1 ? 'nowpay' : ''"></div> -->
                        <!-- 查看详情 -->
                        <div class="btn-status">
                            <button @click="gotoDetail(url['_id'])">
                                <span>查看详情</span>
                                <!-- <span v-else>售发售馨</span> -->
                                <span class="icon"></span>
                            </button>
                        </div>
                    </div>
                    <!-- 图片结束 -->

                    <!-- 文字、价格 -->
                    <div style="padding: 14px">
                        <span class="album-name">{{ url.shopName }}</span>
                        <span class="icon"></span>
                        <!-- 价格 -->
                        <div class="bottom">
                            <el-button class="button white" type="primary" plain
                                @click="gotoDetail(url['_id'])">{{ url.shopPrice }}</el-button>
                        </div>
                    </div>
                </el-card>
                <!-- 卡片区域结束 -->
            </el-col>
        </el-row>


    </div>
</template>
  
<script lang="ts" setup>
import { useRouter } from "vue-router";
import { defineProps, onMounted, PropType, ref } from "vue";
import { useStore } from 'vuex';
import { getIma } from "@/api/api";
import { random } from "lodash";
const router = useRouter()
// 列表数据约束
interface ListType {
    _id:string;
    shopImg:string;
    shopName:string;
    shopPrice:string
    
}
const props = defineProps({
    urls: {
        type: Array as PropType<ListType[]>,
        default: () => []
    }
})

// 获取全局状态
const store = useStore()


// 生成随机图片图片
// const ImgSrc =  async () => {
//     let res:any = await getIma(store.state.userId)   
//     let imgSrc:any[] = res.data.data    
//     let index = Math.ceil(Math.random()*imgSrc.length)    
//     return imgSrc[index].src
// }



// 列表数据渲染
let productList= ref<ListType[]>([])
props.urls.forEach(async (item: any) => {
//     item.缩略图=await ImgSrc()
//     console.log(item);
//     if (item.readypay === 1) {
//         //将即将销售的放在数组最前面
        // productList.value.unshift(item)
//     } else {
        productList.value.push(item)
//     }

})
// 路由跳转--跳到详情页
const gotoDetail = (id: string) => {
    router.push('/detail/'+id)
}
</script>
  
<style scoped lang="scss">
#main {
    // 版心
    margin-top: 50px;
    width: 1170px;
    margin: auto;

    //    标题
    h1 {
        b {
            flex: 1;
            font-weight: 800;
            font-size: 40px;
            line-height: 56px;
            color: #181c1e;
            text-shadow: 0 4px 10px hsl(0deg 0% 100% / 20%);

        }

    }

    //    商品列表样式开始
    .productList {
        position: relative;
        margin: 10px;
        height: 400px;

        // 文字区域
        .album-name {
            font: 600 18px/26px "";
            height: 26px;
            overflow: hidden;
            color: #14181f;
            display: inline-block;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
        }

        .icon {
            display: inline-block;
            width: 16px;
            height: 20px;
            line-height: 26px;
            background: url(https://www.ibox.art/zh-cn/static/img/04e21d6.v1669810212431.svg) center 50% no-repeat;
        }

        //  即将售卖
        .nowpay {
            position: absolute;
            top: 0;
            left: 0;
            width: 58px;
            height: 18px;
            background: url(https://www.ibox.art/zh-cn/static/img/851b225.v1669448689012.svg) no-repeat;
            -moz-background-size: 100% 100%;
            background-size: 100% 100%;
        }

        // 价格
        .bottom {
            margin-top: 13px;
            line-height: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 8px;

            .button {
                margin-left: auto;
                min-width: 60px;
                height: 36px;
                padding: 6px 8px;
                font-size: 17px;
                display: flex;
                border-radius: 6px;

            }

            .white {
                border: 2px solid #2c2c34;
                background-color: #fff;
                color: #2c2c34;
                cursor: default;
            }

            .black {
                background: #e1e1e1;
                border-color: #e1e1e1;
                color: #fff;
                cursor: not-allowed;
            }
        }

        .button:hover {
            border-color: #2c2c34;
            background: #2c2c34;
            color: #fff;
            opacity: .8;
            cursor: pointer;
        }



        // 图片区域
        .media-wrapper {
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            transition: all 0.3s;

            //   图片区域
            .image {
                width: 100%;
                height: 300px;
                display: block;
            }

            // 按钮开始
            .btn-status {
                position: absolute;
                left: 0;
                right: 0;
                top: 50%;
                margin-top: -28px;
                height: 56px;
                text-align: center;
                display: none;

                button {
                    height: 100%;
                    width: 228px;
                    background: rgba(44, 44, 52, .67);
                    border: 1px solid #fff;
                    font-size: 18px;
                    line-height: 25px;
                    display: inline-block;
                    color: #fff;
                    -webkit-border-radius: 10px;
                    -moz-border-radius: 10px;
                    border-radius: 10px;

                    .text {
                        display: inline-block;
                        vertical-align: middle;

                    }

                    .icon {
                        width: 25px;
                        height: 25px;
                        background-image: url(../assets/proListimage/3.png);
                        background-position: center center;
                        background-repeat: no-repeat;
                        background-size: 100%;
                        margin-left: 8px;
                        vertical-align: middle;

                    }
                }


                //  按钮结束
            }
        }

        //鼠标滑动效果
        .media-wrapper:hover img {
            transform: translateZ(30px) translateY(1px) scale(1.3);
            filter: blur(2px);
        }

        .media-wrapper:hover .btn-status {
            display: block;
        }

    }
}
</style>
  